<template>
    <div class="container">
      <my-head></my-head>
      <img class="head-img" src="../assets/img/b1.jpg" alt="">
      <nav class="dhdt">
        <p :class="[dnumber==index ?'active':'']"   v-for="(item,index) in navfont" :key="index" @click="xufl(index)"><span>{{item.font}}</span></p>
      </nav>
      <ul class="con-nr">
        <li  v-show="dnumber==0"    >
          <section class="one1">
            <img  src="../assets/img/video.jpg" alt="">
            <div>
              <h2> 企业文化</h2>
              <p>
                • 使命-传播环保建筑生态理念，为生活、商业建筑带来绿色新活力
                <br/>
                • 愿景-致力于成为集装箱模块建筑行业榜样，努力为客户打造更美好的明天
                <br/>
                • 精神-以匠心铸品质，以精心塑品牌
                <br/>
                • 核心价值观-诚信、品质、和谐、共赢
              </p>
<!--                <i>查看更多</i>-->
            </div>
          </section>
          <ul class="z-hf">
            <li>
              <img src="../assets/img/c1.png" alt="">
              <span>2020</span>
              <p>经国家工商总局批准成立</p>
            </li>
            <li>
              <img src="../assets/img/c2.png" alt="">
              <span>68</span>
              <p>68项集装箱设计、制造相关专利，研发团队10余人</p>
            </li>
            <li>
              <img src="../assets/img/c3.png" alt="">
              <span>20</span>
              <p>源于文旅创意团队专业设计师20人</p>
            </li>
            <li>
              <img src="../assets/img/c4.png" alt="">
              <span>5</span>
              <p>年产值5亿元的生产能力，生产车间4000平方米，现代化生产流水线。</p>
            </li>
          </ul>
          <section class="one1">
            <div>
              <h2>合作发展模式 </h2>

             <p>TUOYE愿与各界商业伙伴及优质个人携手开展战略合作，秉承“精诚合作”的经营态度,共同发展,共赢美好明天!</p>

<!--              <i style="margin-top: 150px">查看更多</i>-->
            </div>
            <img  src="../assets/img/video.jpg" alt="">
          </section>
          <div class="qywenhua">
            <div>
              <h2>杭州拓野集装箱制造有限公司</h2>
              <h3>集装箱建筑的应用领域</h3>
              <p>集装箱能涉及的领域十分广泛，集装箱售楼部、集装箱民宿酒店、集装箱幼儿园、学校、研学营地、集装箱创意展厅、集装箱图书馆、集装箱办公楼、集装箱创意园区、集装箱快闪店、集装箱健身房、集装箱商业街区、集装箱小镇集市、集装箱咖啡馆、集装箱餐厅、集装箱酒吧、集装箱工作室等各种热门建筑。
              </p>
            </div>
            <ul>
              <li v-for="(item,index) in navfont2" :key="index"  @mouseenter="jsmove(index)" @mouseleave="jsmovec">
                <img  :src="item.img" alt="">
                <i   :class="[move==index ?'active':'']"  >{{item.font}}</i>
              </li>


            </ul>
          </div>
          <div class="z-ls">
            <h2>social responsibility</h2>
            <h3>社会责任</h3>
            <ul>
              <li>
                <img src="../assets/img/q3.jpg" alt="">
                <p>生态优先，绿色发展</p>
                <span>生态优先，绿色发展...</span>
              </li>
              <li>
                <img src="../assets/img/ls1.jpg" alt="">
                <p>改变中国文旅的五个建议</p>
                <span>生态优先，绿色发展...</span>
              </li>
              <li>
                <img src="../assets/img/q4.jpg" alt="">
                <p>乡村旅游，精准扶贫</p>
                <span>科技促进美丽乡村旅游发展.......</span>
              </li>
            </ul>
          </div>
        </li>
<!--        <li v-show="dnumber==1"    >-->
<!--          <div>-->
<!--            <p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容2222</p>-->
<!--          </div>-->
<!--        </li>-->
<!--        <li v-show="dnumber==2"    >-->
<!--          <div>-->
<!--            <p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容3333</p>-->
<!--          </div>-->
<!--        </li>-->
<!--        <li v-show="dnumber==3"    >-->
<!--          <div>-->
<!--            <p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容44443</p>-->
<!--          </div>-->
<!--        </li>-->
<!--        <li v-show="dnumber==4"    >-->
<!--          <div>-->
<!--            <p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容44443</p>-->
<!--          </div>-->
<!--        </li>-->
<!--        <li v-show="dnumber==5"    >-->
<!--          <div>-->
<!--            <p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容6666</p>-->
<!--          </div>-->
<!--        </li>-->
      </ul>
        <my-foot></my-foot>
    </div>
</template>

<script>
    export default {
        data(){
          return{
            move:0,
            dnumber:0,
            navfont:[
              {font:"公司简介"},
              {font:"企业文化"},
              {font:"合作品牌"},
              {font:"服务客户"},
            ],
            navfont2:[

              {font:"时尚、优雅、健康的智能生态旅居新方式",img:[require('../assets/img/1-210113134030456.jpg')]},
              {font:"科技引领+服务创新",img:[require('../assets/img/qwer.gif')]},
              {font:"励志打造成世界一流的集装箱房企业",img:[require('../assets/img/1-210113133355564.jpg')]},
              {font:"为荣誉而战",img:[require('../assets/img/q2.jpg')]},

            ],
          }
        },
      mounted() {
        this.$router.afterEach((to, from, next) => {
          window.scrollTo(0, 0)
        })
      },
      methods: {
        xufl(e) {
          this.dnumber = e
        },
        jsmove(index){

          this.move=index

          console.log(this.move)
        },
        jsmovec(){
          this.move=0
        }
      }
    }
</script>

<style scoped lang="less">

  .head-img{
     width: 100%;
     height: auto;
  }
  .dhdt{
    margin:  0 auto;
    display: flex;
    justify-content: center;align-items: center;
    height: 88px;
    width: 1200px;
    p{
      margin: 0 50px;
      font-size: 16px;
      text-align: center;
      padding-bottom: 5px;
      border-bottom: 2px solid #FFFFFF;
    }
    .active{
      transition:all 0.3s ease-in;
      border-bottom: 2px solid crimson;
    }
    P:hover{
      transition:all 0.3s ease-in;
      border-bottom: 2px solid crimson;
    }
  }
  .con-nr{
    width: 100%;
    li{
        .one1{
          display: flex;
          width: 100%;
          height: 600px;

          img{
            width: 50%;
            height: 600px;
            background-size: 100% 100%;

          }
          div{
            padding:0 30px;
            box-sizing: border-box;
            width: 50%;

            background: #fef0f0;
            h2{
              font-size: 40px;
              line-height: 180px;
              color: #ba0027;
              font-family: "CenturyGothicbold","黑体","微软雅黑";
              font-weight: bold;
            }
            h3{
              font-size: 18px;
              font-family: "黑体","微软雅黑";
              line-height: 40px;
            }
            p{
                 margin-top: 35px;
              line-height: 54px;
                font-size: 14px;
               strong{
                display: block;
              }
            }
            i{
              font-style: normal;
              display: block;
              width: 160px;
              height: 50px;
              line-height: 50px;
              text-align: center;
              border: 1px solid #ba0027;
              background: #fff;
              color: #ba0027;
              font-size: 16px;
              margin-top: 80px;
            }
            i:hover{
              background: #ba0027;
              color: #FFFFFF;
              transition: ease .1s;
            }

          }
      }
        .z-hf{
          width: 100%;
          height: 400px;
          background: #f5ab0e;
          display: flex;
          justify-content: center;
          li{
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            width: 260px;
            margin: 0 30px;
            color: #FFFFFF;
            img{
              width: 64px;
              height: 64px;
            }
            span{
              font-size: 36px;
              margin: 20px 0;
            }
            p{
              font-size: 16px;
            }
          }
        }
        .qywenhua{
          >div{
            margin: 50px 0;
            text-align: center;
              h2{
                font-size:32px;
                color: #ba0027;
                font-family: "CenturyGothicbold","微软雅黑";
                font-weight: bold;
              }
              h3{
                font-size:24px;
                line-height: 80px;
              }
              p{
                padding:0 50px;
                font-size:14px;

              }
          }
          >ul{
            display: flex;
            justify-content: space-between;
            li{
              position: relative;
              width: 24.5%;
              box-sizing: border-box;
              img{
                width: 100%;

                height: 100%;
                background-size: 100% 100%;
              }
              i{
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: #00A2E9;
                transform-origin: center bottom;
                transform: scaleY(0);
                font-style: normal;
                display: flex;
                justify-content: center;
                align-items: center;
                color: #FFFFFF;
                font-size: 30px;
                padding: 50px;box-sizing: border-box;
              }
              .active{
                transform: scaleY(1);
                transform-origin: center bottom;
                transition: ease 1s;

              }
              .active2{
                 transform: scaleY(0);
                 transform-origin: center bottom;
                 transition: ease 1s;
               }
            }

          }
        }
        .z-ls{
          background: url("../assets/img/zzz.jpg") no-repeat center top;
          width: 100%;
          background-size: 100% auto;
          background-color:#F4F4F8;;

          h2{
            font-size: 32px; color: #FFFFFF;text-align: center;line-height: 80px;
          }
          h3{
            font-size: 24px; color: #FFFFFF;text-align: center;
          }
          ul{
            width: 100%;
            display: flex;
            justify-content: center;
            li{
              background: #FFFFFF;
              width: 370px;
              display: flex;
              flex-direction: column;
              align-items: center;
              margin: 0 20px;
              img{
                width: 100%;
              }
              p{padding: 40px 0; font-size: 30px;}
              span{
                padding: 30px 0;
                font-size: 16px;
              }

            }
          }
        }
    }
  }
</style>
